@extends('admin.layout.app')

@section('content')
    <div class="layui-col-lg12">
        <div class="layui-card">
            <div class="layui-card-header">
                角色列表
            </div>
            <div class="layui-card-body">
                <div class="layui-btn-group toolbar">
                    <a class="layui-btn" href="@broute('role.create')" title="增加" >
                        <i class="layui-icon layui-icon-add-1"></i>
                    </a>
                    <a class="layui-btn" href="@broute('role.export')" title="導出" >
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </div>

                <table class="layui-table" lay-data="{url:'@broute('role.index')', page:true, id:'roles'}" lay-filter="tb">
                    <thead>
                    <tr>
                        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                        <th lay-data="{field:'id', width:80}">ID</th>
                        <th lay-data="{field:'name'}">名称</th>
                        <th lay-data="{field:'permission'}">权限</th>
                        <th lay-data="{field:'created_at'}">生成时间</th>
                        <th lay-data="{field:'updated_at'}">更新时间</th>
                        <th lay-data="{fixed: 'right', width:200, align:'center', toolbar: '#bar'}">操作</th>
                    </tr>
                    </thead>
                </table>

                <div class="layui-btn-group toolbar">
                    <a class="layui-btn layui-btn-danger " data-type="getCheckData">
                        <i class="layui-icon layui-icon-delete"></i> 批量删除
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="edit" href="@broute('role.edit', ['@{{d.id}}'])" title="编辑">
            <i class="layui-icon layui-icon-edit"></i>
        </a>
    </script>
@endsection
@section('script')
    <script>
        layui.use('table', function () {
            var table = layui.table;
            var $ = layui.$, active = {
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('roles')
                        , data = checkStatus.data;

                    // 抽取所有id
                    var id = [];

                    $.map(data, function (k, v) {
                        id.push(k.id)
                    });

                    $.ajax({
                        url: '@broute('role.delete')',
                        type: 'post',
                        data: {'id':id},
                        success: function (data) {
                            if (!data.status) {
                                layer.msg(data.message, function() {});
                                return false;
                            }
                            layer.msg(data.message);
                            setTimeout(function() {
                                window.location.reload();
                            }, 1000);
                        }
                    });
                }
            };

            $('.toolbar .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

    </script>
@endsection
